<template>
    <div class="bottom-nav">
        <el-row class="shang-meue">

	        <el-col :span="5">
	            <div class="img shouye">

	            </div>
	        </el-col>

	        <el-col :span="5">
	            <div class="img yutang">

	            </div>
	        </el-col>

	        <el-col :span="4">
	            <div class="img fabu">

	            </div>
	        </el-col>

	        <el-col :span="5">
	            <div class="img xiaoxi">

	            </div>
	        </el-col>

	        <el-col :span="5">
	            <div class="img wode">

	            </div>
	        </el-col>

	    </el-row>

	    <el-row class="mueu">
            <el-col :span="5">
                <span>首页</span>
	        </el-col>

	        <el-col :span="5">
                <span>鱼塘</span>

	        </el-col>

	        <el-col :span="4">
                <span>发布</span>

	        </el-col>

	        <el-col :span="5">
                <span>消息</span>

	        </el-col>

	        <el-col :span="5">
                <span>我的</span>

	        </el-col>
	    </el-row>
    </div>
</template>

<script>

export default {
  name: 'bottomnav'
}

</script>

<style scoped>
.bottom-nav{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    border-top: 1px solid #ccc;
}
.img{
    height: 30px;
    width: 30px;
    background-size: 100%;
    margin: 0 auto;
}

.shouye{
    background-image: url("../assets/images/ic_tabbar_home_nor.png");
}

.yutang{
    background-image: url("../assets/images/ic_tabbar_group_nor.png");

}

.fabu{
    background-image: url("../assets/images/comui_tab_post.png");
    width: 50px;
    height: 50px;
    margin-top: -15px;

}

.xiaoxi{
    background-image: url("../assets/images/ic_tabbar_message_nor.png");

}

.wode{
    background-image: url("../assets/images/ic_tabbar_my_nor.png");

}

.shang-meue{
	position: relative;
	bottom: 5px;
}
.mueu{
	position: relative;
	bottom:5px;
	font-size: 12px;
}
</style>